<!-- 员工中心——联系我们 -->
<template>
	<view class="contact-us-page">
		<image src="/static/my/contact-us-bj.png" mode="widthFix"></image>
		<view class="flex-align-center p-content" v-for="(i, j) in list" :key="j">
			<text class="icon-size" :class="i.icons"></text>
			<view class="msg-info flex-columns">
				<text>{{ i.title }}</text>
				<view>{{ i.msg }}</view>
			</view>
		</view>
		<view class="map-cls"><map style="width: 100%; height: 186px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					// 功能——拨打电话
					icons: 'iconfont icon-dianhua',
					title: '电话 | TEL',
					msg: ''
				},
				{
					// 功能——复制
					icons: 'iconfont icon-weixin-copy',
					title: '微信 | WeChat',
					msg: ''
				},
				{
					icons: 'iconfont icon-youxiang',
					title: '邮箱 |mailbox',
					msg: ''
				},
				{
					icons: 'iconfont icon-pailietubiao-26',
					title: '地址 |Address',
					msg: ''
				}
			],

			/* 地图 start */
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/Vector-1.png',
					width:20,
					height:20
				}
			]
			/* 地图 end */
		};
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		// 获取头部用户信息
		async getUserInfo() {
			const result = await this.$http.get({
				url: this.$api.getPersonInfo,
				data: {
					siteId: uni.getStorageSync('siteId'), // 站点id
					userId: uni.getStorageSync('userId') //登录用户的id
				}
			});
			if (result.code == 200) {
				console.log('获取头部用户信息result.', result);
				let info = result.data;
				this.list[0].msg = info.telephone; //电话
				this.list[1].msg = info.wechat; //微信
				this.list[2].msg = info.email; //邮箱
				this.list[3].msg = info.address; //地址
			} else {
				this.$sun.toast(result.message);
			}
		}
	}
};
</script>

<style lang="less">
.contact-us-page {
	image {
		width: 100%;
	}
	.p-content {
		margin: 0 20rpx;
		padding: 40rpx 10rpx 36rpx;
		border-bottom: 2rpx dashed #eaeaea;
		.icon-size {
			font-size: 64rpx;
			margin-right: 40rpx;
			color: #19c866;
		}
		.msg-info {
			text {
				color: #999999;
				font-size: 26rpx;
			}
			view {
				font-size: 32rpx;
				margin-top: 10rpx;
			}
		}
	}
	.map-cls {
		padding: 66rpx 20rpx;
	}
}
</style>
